<template>
<div>
  <el-card class="box-card">
    <el-button
      class="btn-add"
      @click="handleUpdateMerchantSpu()"
      size="mini">
      添加
    </el-button>
  </el-card>
  <el-table
    :data="tableData"
    border
    style="width: 100%" >
    <el-table-column
      align="center"
      prop="merchantSpuId"
      label="店铺商品分类编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="merchantSpuTypeName"
      label="店铺商品分类名称"
      align="center"
      width="180">
    </el-table-column>

    <el-table-column label="操作" width="160" align="center">
      <template slot-scope="scope">
        <p>
          <el-button
            size="mini"
            @click="handleUpdateMerchantSpu(scope.$index, scope.row)">编辑
          </el-button>
        </p>
        <p>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteMerchantSpu(scope.$index, scope.row)">删除
          </el-button>
        </p>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form ref="productAttrCatForm":model="merchantForm" label-width="120px">
      <el-form-item label="店铺商品分类编号" prop="merchantSpuId" v-show="false">
        <el-input v-model="merchantForm.merchantSpuId" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="店铺商品分类名称" prop="merchantSpuTypeName">
        <el-input v-model="merchantForm.merchantSpuTypeName" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm()">确 定</el-button>
      </span>
  </el-dialog>


</div>
</template>

<script>
    export default {
        name: "MerchantSpuList",
        data(){
            return{
              dialogTitle:'',
              dialogVisible:false,
              tableData:[],
              merchantForm:{
                merchantSpuId:'',
                merchantSpuTypeName:'',
              }
            }
        },
        created() {
          this.getMerchantSpuList();
        },

        methods:{
          /*编辑与添加*/
          handleUpdateMerchantSpu(index,row){
            this.dialogVisible=true;
            if(row==undefined){
              this.dialogTitle="添加";
              this.merchantForm.merchantSpuId='';
              this.merchantForm.merchantSpuTypeName='';
            }else{
              this.dialogTitle="编辑";
              this.merchantForm.merchantSpuId=row.merchantSpuId;
              this.merchantForm.merchantSpuTypeName=row.merchantSpuTypeName;
            }
          },
          /*删除*/
          handleDeleteMerchantSpu(index,row){
            this.$axios({
              method: "delete",
              url: "http://localhost:8101/merchantSpu/del/"+row.merchantSpuId,
            }).then(result => {
              this.getMerchantSpuList();
            })
          },
          /*确定*/
          handleConfirm(){
            this.dialogVisible=false;
            if(this.dialogTitle=="添加"){
              this.$axios({
                method: "post",
                url: "http://localhost:8101/merchantSpu/add",
                params:{
                  merchantSpuTypeName:this.merchantForm.merchantSpuTypeName,
                  merchantId:1
                }
              }).then(result => {
                this.getMerchantSpuList();
              })
            }else if(this.dialogTitle=="编辑"){
              this.$axios({
                method: "post",
                url: "http://localhost:8101/merchantSpu/amend",
                params:{
                  merchantSpuTypeName:this.merchantForm.merchantSpuTypeName,
                  merchantSpuId:this.merchantForm.merchantSpuId
                }
              }).then(result => {
                this.getMerchantSpuList();
              })
            }

          },



          /*查询所有*/
          getMerchantSpuList(){
            this.$axios({
              method: "get",
              url: "http://localhost:8101/merchantSpu/findAll/"+1
            }).then(result => {
              console.log(result);
              this.tableData=result.data;
            })
          }
        }
    }
</script>

<style scoped>

</style>
